<template>
  <div class="wrapper">
    <div class="header">
      <img class='img-logo' src="../../common/images/favicon.png"/>
      <span class="span-title">
        <span class="span-title-es">{{title}}</span>
      </span>
      <span class="span-user">{{companyName||user.name}}  : {{user.name === 'admin'? $getTextByLangKey('管理员'): $getTextByLangKey('普通用户')}}</span>
      <el-button class="btn-logout" size="small" @click="logout">{{$getTextByLangKey('退出')}}</el-button>
      <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link"
                style="width: 100px;display: block;text-align: center;height: 40px;line-height: 40px;">
            {{language==='zh'?'中文':''}}{{language==='en'?'English':''}}
            <i class="el-icon-arrow-down el-icon--right" style="margin-left: 2px;"></i>
          </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="zh" :disabled="language==='zh'"
                            style="width: 100px;display: block;text-align: center;">中文
          </el-dropdown-item>
          <el-dropdown-item command="en" :disabled="language==='en'"
                            style="width: 100px;display: block;text-align: center;">English
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="line"></div>
    <div class="content-wrapper">
      <div class="menu">
        <menu-component :menu_data="menu_data"></menu-component>
      </div>
      <div class="line-vertical"></div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
    <div class="line"></div>
    <div class="footer">
      <span>Copyright © 2013-2024 {{$getTextByLangKey('深圳市华师特科技有限公司')}}</span>
    </div>

    <user-check></user-check>
    <remark-dialog
      slot="dialog"
      :dialogVisible="dialogVisible"
      @cancelDialog="dialogVisible = false"
    ></remark-dialog>
  </div>

</template>

<script>

  import menu from '@/base/menu.vue'
  import usercheck from '@/base/usercheck.vue'
  import test from '@/test/test.js'
  import request from '@/common/js/request'
  import util from '@/common/js/util'
  import remarkDialog from '@/base/userInfoDialog.vue'
  export default {
    data() {
      return {

        user: {
          name: '',
        },

        language: '',

//        menu_data:test.generateMenu(test.menu_data)
        menu_data: [],

        //        这是实现自动刷新功能的
        timer: '',
        isRequesting: false,

        localAutoRequest : localStorage.getItem('autoRequest'),
        dialogVisible: false,
        companyName:'',


        title:''
      }

    },
    created: function () {

      this.user.name = ((username) => {
        return username ? username : this.$getTextByLangKey("未登录")
      })(localStorage.getItem("username"))

      this.language = localStorage.getItem("language") || 'zh'

      this.stopTimer()
      this.creatTimer()
//      this.menu_data = test.generateMenu(test.menu_data)
      this.fetchCompanyName()


      this.setTitle()
    },

    destroyed: function () {
      this.stopTimer()
      console.log('---- destroyed ----')
    },


    watch: {
      // 如果路由有变化，会再次执行该方法
//      '$route': 'fetchData'
    },

    methods: {
      getTitleType(){
        const {type} = this.$route.query
        if(type){
          localStorage.setItem('titleType',`${type}`)
          return type
        }
        return `${localStorage.getItem('titleType')}`
      },
      setTitle(){
        const titleType = this.getTitleType()
        // console.log('ttt',titleType)
        if(titleType === '1'){
          this.title = this.$getTextByLangKey("SMT管理系统")
          return
        }
        this.title = this.$getTextByLangKey("SMT防错料及追溯系统")

      },
      fetchCompanyName(){
        request.requestGetCompanyName(res=>{
          console.log('res.data.data',res)
          this.companyName = res.data.data
        })
      },
      creatTimer: function () {
        this.autoRequest()
        if(this.$route.query.autoRequest === 'off' || this.localAutoRequest){
          console.log('关闭自动请求菜单')
          return
        }
        this.timer = setInterval(() => {
          if (!this.isRequesting) {
//            console.log('开始自动请求')
            this.autoRequest()
          } else {
//            console.log('请求结果未返回')
          }
        }, 1500)
      },
      stopTimer: function () {
        clearTimeout(this.timer)
        this.isRequesting = false
      },

      autoRequest: function () {
        this.isRequesting = true
//        console.log('请求菜单栏')

        request.requestMenuList(res => {
          this.isRequesting = false
          this.menu_data = test.generateMenu(res.data.data)

        }, res => {
          this.isRequesting = false
        })

      },
      logout: () => {

        localStorage.removeItem("username")
        setTimeout(function () {
          util.linkToPath('/login')
        }, 800)
      },

      handleCommand(language) {
        this.language = language
        localStorage.setItem("language", language)
        this.$router.replace({path: '/', query: {lang: language}})
        location.reload()
      }
    },
    components: {
      'menu-component': menu,
      'user-check': usercheck,
      'remark-dialog': remarkDialog,
    },

  }
</script>


<style scoped lang="stylus">
  @import "../../common/stylus/index.styl"
  .wrapper {
    display: flex;
    flex-direction column;
    width 100%

    .header {
      height: 80px;
      background: rgb(238, 241, 246);
      display: flex;
      align-items center;

      .img-logo {
        width: 36px;
        height: 36px;
        margin-left: 80px;
      }

      .span-title {
        margin-left: 10px;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 2px;
        flex: 1;
        display flex
        align-items: center;
      }
      .span-user{
        cursor pointer
        font-size: 28px;
      }

      .span-title-es {
        margin-left: 10px;
        font-size: 36px;
        font-weight: bold;
        letter-spacing: 2px;
      }

      .btn-logout {
        margin 0 0px 0 20px;
      }
    }

    .content-wrapper {
      display: flex;
      flex: 1;

      .menu {
        width: 200px;
        min-width: 200px;
      }

      .content {
        position absolute;
        left 201px
        /*width: 85%;*/

        width: calc(100% - 201px);
        background: rgb(238, 241, 246);
      }
    }

    .footer {
      height: 30px;

      span {
        display: block;
        width: 100%;
        line-height: 30px;
        text-align: center;
        color: rgb(100, 102, 104);
      }
    }
  }
</style>


